<template>
	<view class="page">
		<view class="box_1">
			<view class="box_4">
				<view class="image-text_1">
					<view class="section_1"></view>
					<text lines="1" class="text-group_1">运动记录</text>
				</view>
			</view>
			<view class="list_1" v-if="detail.list != ''">
				<view class="list-items_1-0" v-for="(item, index) in detail.list" :key="index">
					<view class="image-text_2-0">
						<image :src="item.project.icon" class="image_3-0"></image>
						<text lines="1" class="text-group_2-0">{{item.project.name}}</text>
					</view>
					<view class="">
						<text lines="1" class="text_3-0">{{item.sport_time}}</text>
						<!-- <text lines="1" class="text_4-0">16:00-20:00</text> -->
					</view>
				</view>

			</view>
			<view class="" v-else style="margin-top: 80rpx;">
				<u-empty  mode="coupon" text="敬请期待"
					icon="https://oss.szsportscenter.cn/img/58d1bf2665b8c20e302f02c56274f0ce972df8b4.png" />
				
			</view>
			<view class="" style="margin-bottom: 30rpx;"  v-if="detail.list != ''">
				<u-loadmore :status="status" loading-text="努力加载中" loadmore-text="更多记录" nomore-text="到底了"
					@loadmore="loadNewsList" color="#729E87" fontSize="12px" />
				<!-- <text lines="1" class="text_5">更多记录</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	const subscribe = require('@/api/subscribe/index.js');
	export default {
		data() {
			return {
				po3: this.$https.assetsPath + 'po3.png',
				status: "loading",
				detail: {
					list: [],
					tabList: [], //图标菜单
					hiddenTab: false, //隐藏tab
				},
				page: 1,
			};
		},
		onLoad(options) {
			this.myExerciseHour()
		},
		onShow() {

		},
		methods: {
			// 获取分类商品
			async myExerciseHour() {
				let data = {
					open_id: uni.getStorageSync('openid'),
					pagesize: 7,
					page: this.page,
				}
				let result = await subscribe.myExerciseHour(data)
				if (result.code == 1) {
					if (this.detail.list.length < 1) {
						this.detail.list = result.data.data;
					} else {
						this.detail.list.push(...result.data.data);
					}
					this.status = "loadmore";

					if (result.data.data.length < 7) {
						this.status = "nomore";
					}
				}
			},
			loadNewsList() {
				this.status = "loading";
				this.page += 1;
				this.myExerciseHour();
			},
			sports_data() {
				uni.navigateTo({
					url: './sports_data'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.box_1 {
		// box-shadow: 0px 0px 10px 0px rgba(32, 64, 48, 0.12);
		background-color: rgba(255, 255, 255, 1.0);
		display: flex;
		flex-direction: column;
		padding: 29rpx 12rpx 18rpx 20rpx;
	}

	.box_4 {
		background-color: rgba(255, 255, 255, 1.0);
		border-radius: 12rpx;
		display: flex;
		flex-direction: row;
		padding: 0 0 20rpx 0;
	}

	.image-text_1 {
		width: 128rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.section_1 {
		background-color: rgba(75, 166, 119, 1.0);
		border-radius: 12rpx;
		width: 6rpx;
		height: 24rpx;
		display: flex;
		flex-direction: column;
		margin: 8rpx 0 8rpx 0;
	}

	.text-group_1 {
		overflow-wrap: break-word;
		color: #333333;
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.list_1 {
		// height: 960rpx;
		margin-right: 8rpx;
		display: flex;
		flex-direction: column;
	}

	.list-items_1-0 {
		width: 710rpx;
		background-size: 100% 100%;
		margin-bottom: 20rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		padding: 35rpx 30rpx 35rpx 30rpx;
		background: #F4F9F9;
		border-radius: 20rpx;
		align-items: center;
	}

	.image-text_2-0 {
		width: 170rpx;
		flex-direction: row;
		display: flex;
		align-items: center;
	}

	.image_3-0 {
		width: 50rpx;
		height: 50rpx;
		// border-radius: 10rpx;
	}

	.text-group_2-0 {
		width: 84rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		// line-height: 24rpx;
		margin-left: 15rpx;
	}

	.text_3-0 {
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 37rpx;
	}

	.text_4-0 {
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 37rpx;
		margin: 0 0 0 20rpx;
	}


	.text_5 {
		overflow-wrap: break-word;
		color: rgba(114, 158, 135, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
		margin-top: 40rpx;

	}
</style>